<template>
    <div class="container">
      <TeacherSidebar />
      <div class="right-content">
        <main class="main">
          <el-calendar v-model="value" />
        </main>
      </div>
    </div>

  </template>
  
  <script setup>
  import TeacherSidebar from '@/components/TManageSidebar.vue';
  import { ref } from 'vue'
  const value = ref(new Date())

  </script>
  
  <style scoped>
  .container {
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
  }

  .right-content {
    margin-left: 60px;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20px;
  }

  .main {
    width: 100%;
  }

  :deep(.el-calendar) {
    width: 800px;
    margin: 0 auto;
  }

  </style>